<script setup lang="ts">
import { ref, PropType } from "vue";
import uploadFile from "@/utils/uploadFile";
import DomVideo from "@/components/ls-dom-video/ls-dom-video.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  pics: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  video: {
    type: String,
    default: "",
  },
});
const show = ref<boolean>(false);
const changePopup = (val: boolean) => {
  show.value = val;
  console.log(show.value);
};
const chooseImages = () => {
  // uploadFn("https://file.king-of-panda.com/admin/sys-file/oss/file?fileName=e15836186e774670b8852f7f7d991737.jpg", 'pics')
  // 上传图片
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const imgFile = res.tempFilePaths;
      console.log(imgFile);
      uploadFile
        .upload(imgFile[0])
        .then((res: any) => {
          console.log(res);
          uploadFn(res.data.url, "pics");
        })
        .catch((err) => {
          console.log("失败", err);
        });
    },
    fail: (err) => {
      console.log(err);
    },
  });
};
const chooseVideo = () => {
  // uploadFn('http://hengda.pro.aisisoft.com.cn/storage/cover_img/83/7959f34c98644e187d6d9b33e7da59.mp4')
  // 上传视频
  uni.chooseVideo({
    count: 1,
    success: (responent) => {
      const videoFile = responent.tempFilePath;
      console.log(videoFile);
      uploadFile.upload(videoFile, 20).then((res: any) => {
        console.log(res);
        uploadFn(res.data.url, "video");
      });
    },
  });
};
const emits = defineEmits(["change"]);
const uploadFn = (url: string, type: string) => {
  const val = {
    url: url,
    type: type,
  };
  emits("change", val);
  changePopup(false);
};
const show2 = ref(false);
const close = () => {
  show2.value = false;
};
const videoUrl = ref<string>("");
const videoPay = (url: string) => {
  console.log(url);
  show2.value = true;
  videoUrl.value = url;
};
</script>

<template>
  <view
    v-if="pics.length == 0 && video == ''"
    class="upload"
    @click="changePopup(true)"
  >
    <image mode="widthFix" src="../../static/image/upload.png"></image>
    <view class="desc">
      {{ t("other.shareImagesOrVideos") }}
    </view>
  </view>
  <view v-else class="upload-line">
    <view class="files" v-for="(item, index) in pics" :key="index">
      <img :src="item" />
    </view>
    <DomVideo @click="videoPay(video)" v-if="video" :src="video"></DomVideo>
    <view class="upload" @click="changePopup(true)">
      <image mode="widthFix" src="../../static/image/upload.png"></image>
    </view>
    <i></i>
    <i></i>
  </view>
  <fui-bottom-popup :show="show" @close="changePopup(false)">
    <view class="title">
      {{ t("other.selectUploadType") }}
      <fui-icon
        name="close"
        :size="48"
        color="#B3B3B3"
        @click="changePopup(false)"
      ></fui-icon>
    </view>
    <view class="line" @click="chooseImages">
      {{ t("other.picture") }}
    </view>
    <view class="line" @click="chooseVideo">
      {{ t("other.video") }}
    </view>
  </fui-bottom-popup>
  <fui-backdrop :show="show2" closable @click="close">
    <DomVideo
      v-if="show2"
      :autoplay="true"
      :controls="true"
      :src="videoUrl"
    ></DomVideo>
  </fui-backdrop>
</template>

<style lang="scss" scoped>
.upload {
  border: 1px dashed #999999;
  border-radius: 5px;
  text-align: center;
  padding: 16px 0 11px;

  image {
    width: 18px;
  }

  .desc {
    font-size: 13px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0px;

    /* 主色系 */
    color: $subject-color;
  }
}

.upload-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  i {
    width: calc((100vw - 40px) / 4 - 15px);
  }

  .files,
  .upload,
  .dom-video {
    width: calc((100vw - 40px) / 4 - 15px);
    height: calc((100vw - 40px) / 4 - 15px);
    background: #efefef;
  }

  .upload {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .files {
    margin-bottom: 10px;

    video,
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
  }
}

.fui-bottom__popup-wrap {
  .title {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 20px;
    padding: 20px;

    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0px;

    font-feature-settings: "kern" on;
    color: #3d3d3d;

    .fui-icon {
      float: right;
    }
  }

  .line {
    text-align: center;
    margin: 15px 0;
  }
}
</style>
